As classes de estilo (CSS)
Maio 2018
As classes e os ID
As classes
Pode ser interessante atribuir estilos diferentes às mesmas tags. Para isto, as especificações CSS introduziram o conceito de classe.A definição das classes é tão simples quanto a dos estilos. Ela consiste em especificar a tag selecionada (como para uma declaração de estilo) e, em seguida, acrescentar-lhe um ponto (.) e o nome que se quer dar à classe. O nome da classe pode ser composto por letras (acentuadas ou não), números e travessões, conforme o exemplo abaixo:
Seletor_de_tag.Nome-da-classe {
propriedade de estilo: Valor;
propriedade de estilo: Valor;
...;
}
Neste caso, Nome-da-classe representa o nome dado à classe.
Chamada de uma classe
Para chamar uma classe no código HTML, basta acrescentar um atributo class à tag, ou seja, a classe vermelha aplicada à tag b:B.vermelho {fonte: Verdana 12px; color: #FF0000; }
A chamada desta classe no código será feita da seguinte maneira:
<B class= "Vermelho" > Texto a por em vermelho e em negrito </B>
As classes universais
É possível não especificar uma tag. Neste caso, a classe poderá ser utilizada em qualquer tag para a qual o estilo selecionado tenha um sentido. Falamos, então, de classe universal (às vezes, de classe independente). A definição de tal classe é feita pondo um ponto antes do nome da classe:. Nome-da-classe {propriedade de estilo: Valor; propriedade de estilo: Valor…}
Ou a seguinte classe important:
.important {fonte-tipo: arial; color: red; font-weight: bold}
A chamada desta classe pode ser feita a partir de qualquer elemento HTML para o qual a definição é válida:
<h1 class= "important" >Cuidado, isto é um aviso</h1>
<i class= "important" > (favor levar em conta) </i>
 | Note a ausência do ponto na chamada da classe. |
Pseudoclasses
As pseudoclasses permitem aprimorar o estilo aplicado a um certo número de tags, definindo uma reação a um evento ou a uma posição relativa da tag nas outras tags.Contrariamente às classes, o nome das pseudoclasses é predefinido, logo, não é possível criar as suas próprias pseudoclasses. Existem vários tipos de pseudoclasses, Veja quais são elas.
As pseudoclasses dinâmicas
As pseudoclasses dinâmicas permitem alterar o estilo de uma tag em função de um acontecimento (movimento do mouse, clique ou pressão em uma tecla do teclado). Existem três:A pseudoclasse :hover, que permite atribuir um estilo à tag selecionada durante a passagem do cursor do mouse:
A:hover {font-decoration: underline;}
A pseudoclasse :focus, que define um estilo para a tag selecionada quando o foco lhe é dado (por exemplo, durante um clique em um elemento de formulário):
TEXTAREA:focus {color: #FF0000;}
A pseudoclasse :active, que permite definir um estilo para a tag selecionada quando o usuário clica no elemento (entre o momento em que o usuário clica no botão do mouse e o larga):
A:active {color: #FF0000;}
| | As pseudoclasses dinâmicas não são reconhecidas da mesma maneira por todos os navegadores. |
As pseudoclasses de link
As pseudoclasses de link são específicas da tag <A>:A pseudoclasse link: define o estilo dos links de hipertexto ainda não consultadas pelo cliente enquanto a pseudoclasse visited: permite definir o estilo dos links de hipertexto que o cliente já visitou
| É possível que certos navegadores considerem um link como não visitado se não for consultado durante um longo período de tempo. |
A pseudoclasse descendente
Uma pseudoclasse descendente permite aplicar um estilo à primeira tag de um elemento. A sintaxe desta pseudoclasse é a seguinte:Elemento_Parente > Tag:first-child {style;}
Assim, a seguinte declaração se aplica à primeira tag <A> situada num jogo de tags <P> </P>:
P > A:first-child {color: #00FF00;}
Desta maneira, a tag <A> seguinte possuirá o estilo acima:
<P align="justify">
<A href="http://br.ccm.net/">CCM</A>
</P>
A tag <A> seguinte, em contrapartida, não será levada em conta porque não é a primeira tag após a tag <P>:
<P align="justify">
<BR/<
<A href="http://br.ccm.net/">CCM</A>
</P>
As pseudoclasses de texto
As pseudoclasses de texto permitem aplicar um estilo a uma parte do texto delimitado pelas tags às quais se aplicam. Assim, as pseudoclasses de texto são geralmente utilizadas juntamente com a tag de parágrafo (<P>). Existem duas pseudoclasses de texto:A pseudoclasse :first-Line, que permite aplicar um estilo à primeira linha de um parágrafo:
P:first-line { text-transform: uppercase }
Já a pseudoclasse :first-letter, que permite aplicar um estilo à primeira letra de um parágrafo para produzir um efeito tipográfico. O exemplo seguinte dobra o tamanho e põe em negrito a primeira letra de um parágrafo:
P:first-letter { font-size: 200%; font-weight: bold; }
As pseudoclasses de língua
É possível definir um estilo em função da língua do documento (especificado nos cabeçalhos HTTP ou nas metatags) ou da língua de um elemento HTML ou XML (especificado graças ao atributo opcional LANG) se esta for especificada.Uma pseudoclasse de língua utiliza a notação :lang (Língua). Esta pseudoclasse de língua permite definir as aspas de acordo com a notação francesa:
HTML:lang(fr) { quotas: '« ' ' »' }
As pseudoclasses de página
O selecionador @page permite alterar a definição da formatação de uma página HTML (dimensão, margem, etc.) durante a impressão, como as margens (margin-left, margin-top, margin-right, margin-bottom) e o tamanho (size). Então, é preciso imaginar a página web como um caderno ou um livro (um conjunto de páginas de papel).Assim sendo, as pseudoclasses de página permitem selecionar as páginas da esquerda, da direita ou a primeira página de um documento. Existem diferentes pseudoclasses de página:
@page:left: permite definir as propriedades das páginas à esquerda:
@page:left { size: landscape; margin-left: 2cm; }
@page:right: permite definir as propriedades das páginas à direita:
@page:right { size:landscape; margin-left: 2.5cm; }
@page:first: permite definir as propriedades da primeira página de um documento:
@page:first { size: portrait; margin-left: 2.5cm; margin-right: 2cm; margin-bottom: 1cm; margin-top: 4cm;}
Os seletores de ID
O seletor de ID (identificador) permite fazer referência a um elemento único de uma página identificada pelo seu identificador. Os ID servem, principalmente, para localizar elementos HTML graças ao JavaScript.A sintaxe de um seletor IDEM é a seguinte:
#nome_ID { style }
Tal estilo é chamado da seguinte maneira:
<TAG ID="nome_ID" > ... </TAG>
Observação: só pode existir um ID por página. Note também a ausência de # na chamada do seletor ID
Última modificação: 22 de março de 2018 às 09:06 por Jeff.